/**
 * @module: 验证码页面
 * @author: xiongsha
 * @date: 2020-05-26 22:28:43
 */

import React, { useState, useEffect } from 'react';
import { Toast } from 'antd-mobile';
import { RouteComponentProps } from 'react-router';
import request from '@src/utils/request';
import './style.less';

const Yzm = (props: RouteComponentProps) => {
  const [time, setTime] = useState<number>(60);
  const phone = (props.match.params as any).phone;
  const initKey = (props.match.params as any).key;
  const [key, setKey] = useState<string>(initKey);

  useEffect(() => {
    changeTime();
  }, []);

  const changeTime = () => {
    setTime(60);
    let nowTime = 60;
    const timer = setInterval(() => {
      nowTime--;
      if (nowTime === 1) {
        clearInterval(timer);
      }
      setTime(nowTime - 1);
    }, 1000);
  };

  const getYzm = () => {
    // 获取验证码
    request('post', '/api/v1/verificationCodes', {
      phone,
    }).then((res) => {
      if (res && res.code === 200) {
        setKey(res.key);
        props.history.replace(`/yzm/${phone}/${res.key}`);
        Toast.info('发送成功');
      } else {
        Toast.fail(res.message);
      }
    });
  };

  const keyup = (e, t: string, t1?: string, t2?: string) => {
    // 输入框输入后聚焦下一个输入框
    const yzm: any = (document as any).yzm;
    if (e.keyCode === 8 && yzm[t].value.length == 0 && t1) {
      yzm[t1].focus();
    } else if (yzm[t].value.length == 1 && t2) {
      yzm[t2].focus();
    }
    if (t === 'T6') {
      const code = `${yzm.T1.value}${yzm.T2.value}${yzm.T3.value}${yzm.T4.value}${yzm.T5.value}${yzm.T6.value}`;
      if (code.length === 6) {
        checkYzm(code);
      } else {
        Toast.fail('请输入正确验证码');
      }
    }
  };

  const checkYzm = (code) => {
    // 注册
    request('post', '/api/v1/users', {
      phone,
      verification_key: key,
      verification_code: code,
      name: 1212,
    }).then((res) => {
      if (res && res.code === 200) {
        if (res.data.bound_phone) {
          props.history.push('/');
        } else {
          Toast.fail('注册失败');
        }
      } else {
        Toast.fail(res);
      }
    });
  };

  return (
    <div className="yzm">
      <p className="title">请输入6位验证码</p>
      <p className="tips">验证码已发送至86{phone}</p>
      <p className="yzmTips">6位验证码</p>
      <form name="yzm" className="yzm-form">
        <input
          className="yzm-input"
          name="T1"
          onKeyUp={(e) => {
            keyup(e, 'T1', undefined, 'T2');
          }}
          maxLength={1}
          type="tel"
        />
        <input
          className="yzm-input"
          onKeyUp={(e) => {
            keyup(e, 'T2', 'T1', 'T3');
          }}
          name="T2"
          maxLength={1}
          type="tel"
        />
        <input
          onKeyUp={(e) => {
            keyup(e, 'T3', 'T2', 'T4');
          }}
          className="yzm-input"
          name="T3"
          maxLength={1}
          type="tel"
        />
        <input
          onKeyUp={(e) => {
            keyup(e, 'T4', 'T3', 'T5');
          }}
          name="T4"
          maxLength={1}
          className="yzm-input"
          type="tel"
        />
        <input
          name="T5"
          onKeyUp={(e) => {
            keyup(e, 'T5', 'T4', 'T6');
          }}
          maxLength={1}
          className="yzm-input"
          type="tel"
        />
        <input
          name="T6"
          onKeyUp={(e) => {
            keyup(e, 'T6', 'T5');
          }}
          className="yzm-input"
          maxLength={1}
          type="tel"
        />
      </form>
      <p className="timeTips">
        {time > 0 ? (
          <>
            <span>{time}</span>秒后重新获取
          </>
        ) : (
          <span onClick={getYzm}>重新获取</span>
        )}
      </p>
      {/* <div className="user">
        <span>用户名: </span>
        <input className="user-name" placeholder="请输入用户名" />
      </div> */}
    </div>
  );
};

export default Yzm;
